<template>
  <Card :body-style="{padding: '24px 32px'}" :bordered="false">
    <icon-selector v-model="currentSelectedIcon" @change="handleIconChange"/>

    <Divider />
    <p>测试 IconSelector 组件 v-model 功能</p>
    <Button @click="changeIcon('md-arrow-down')">改变 md-arrow-down</Button>
    <Divider type="vertical" />
    <Button @click="changeIcon('md-add-circle')">改变 md-add-circle</Button>
  </Card>
</template>

<script>
import IconSelector from '@/components/icon-selector'

export default {
  name: 'IconSelectorView',
  components: {
    IconSelector
  },
  data () {
    return {
      currentSelectedIcon: 'ios-thumbs-up'
    }
  },
  methods: {
    handleIconChange (icon) {
      this.$Message.info(`<span>选中图标 <code>${icon}</code></span>`)
    },
    changeIcon (type) {
      this.currentSelectedIcon = type
    }
  }
}
</script>
